<template>
  <div id="layout-header-basic">
    <a-layout>
      <a-layout-header :style="{zIndex: 1}">
        <div class="header-logo">
          <div class="logo-box">
            <img src="../../assets/images/logo.png" alt="">
            <span>工业智能物联网平台</span>
          </div>
        </div>
        <div class="header-right">
          <a-dropdown :trigger="['click']">
            <span class="ant-dropdown-link" @click="e => e.preventDefault()">
              <a-icon type="user"/>
            </span>
            <template v-slot:overlay>
              <a-menu id="header-menu">
                <a-menu-item>
                  <img src="../../assets/images/PersonallCenter/touxiang.png" alt="" width="24" height="24">
                  <span style="padding-left: 8px;">{{userInfo.username}}</span>
                </a-menu-item>
                <a-menu-item>
                  <span>{{userInfo.TenantNickname}}</span>
                </a-menu-item>
                <a-menu-item>
                  <span class="per-btn" style="padding-right: 43px;" @click="goPersonall">账户设置>>></span>
                  <span class="per-btn" @click="loginout">退出登录</span>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>
    </a-layout>
  </div>
</template>

<script>
export default {
  name: 'GlobalHeader',
  data () {
    return {
      userInfo: {}
    }
  },
  mounted() {
    this.userInfo = JSON.parse(this.$store.state.user.userInfo)
    console.log('用户信息', this.userInfo)
  },
  methods: {
    goPersonall() {
      this.$router.push('/account')
    },
    loginout() {
      this.$api.logout().then(_ => {
        console.log('_', _)
        this.$store.commit('SET_REMOVE')
        this.$router.push('/Login')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
> > > .ant-layout-header {
  position: fixed;
  width: 100%;
  background: #fff;
  box-shadow: 2px 0px 20px 0px rgba(0, 0, 0, 0.10);
}

.header-logo {
  height: 64px;
  float: left;

  .logo-box {
    display: flex;
    justify-content: center;

    img {
      width: 38px;
      height: 38px;
      margin-top: 11px;
    }

    span {
      display: block;
      font-size: 24px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #2C3749;
      margin-left: 8px;
    }
  }
}
.header-right {
  float: right;
  font-size: 16px;
}
#header-menu {
  .ant-dropdown-menu-item:hover {
    background-color: #ffffff !important;
  }
}
.per-btn {
  font-size: 12px;
  color: #0456de;
}
</style>
